<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <script>
       class Render{
            constructor(data){
                this.data = data
                this.init()
            }
            init(){
                this.Append()
                this.Style()
                this.translateX()
            }
            Append(){
                let {title,btns} = this.data
                let div = document.createElement("div")
                div.innerHTML = `<h4>${title}</h4>`
                div.innerHTML += btns.map(item => {
                    return `<button>${item}</button>`
                }).join("")
                document.body.appendChild(div)
            }
            Style(){
                let div = document.querySelector("div")
                div.style.width = "200" + "px"
                div.style.height = "150" + "px"
                div.children[0].style.textAlign = "center"
                div.style.background = "#ccc"
                div.style.position = "fixed"
                div.style.left = "200"+"px"
            }
            translateX(){
                let div = document.querySelector("div")
                div.onmousedown = (e) => {
                    let X = e.clientX - div.offsetLeft
                    let Y = e.clientY - div.offsetTop
                    document.onmousemove = (y) =>{
                        let {left,top} = {left:y.pageX - X,top:y.pageY - Y}
                        div.style.left =left+ "px"
                        div.style.top =top + "px"
                    }
                }
                div.onmouseup = () => {
                    document.onmousemove = null
                }
            }
        }
        
        new Render({
            title : "标题",
            btns:[
                "取消",
                "确认"
            ]
        })
    </script>
</body>
</html>